<template>
	<view class="wapper">
		<globalheader  >
			
			<template #right>
				<navigator url="/pages/user/zplog">
					<image src="/static/logicon.png" mode="" class="left-icon"
					style="width: 40rpx;height: 40rpx;"
						 ></image>
				</navigator>
				
			</template>
		</globalheader>
		<view class="top-1 ss-flex-col ss-col-center" >
			<image src="/static/zp_title.png" mode=""></image>
			<view class="title-b">
				抽奖次数：{{info.lottery_num}}次
			</view>
		</view>
		<view class="zp" style=" display: flex;width: 645rpx;margin: 0 auto;margin-top: 140rpx;">
			<l-dialer size="645rpx" ref="zp" :prizeList="obj.prizes">
				<!-- <image slot="border" src="@/static/dialer/lottery-bg.png"/> -->
				<template #border>	
				<image  style="width:750rpx;height: 750rpx;transform: translate(-50rpx,-45rpx);"
					src="@/static/icon_zp.png" />
						</template>
				<template #pointer>	
				<image  style="width: 220rpx; height: 250rpx;transform: translate(-10rpx,-10rpx);" @tap="raffle"
					src="@/static/zzicon.png" />
					</template>
			</l-dialer>
		</view>
		<view class="">
			<view class="button1" @tap="$refs.richtextPop1.open()">
				  查看抽奖规则>		
			</view>
		</view>
	
<richtextPop ref="richtextPop1" :node="obj"></richtextPop>
	</view>
</template>

<script>
import LC from '../../LC';
	import richtextPop from '../auth/richtext_pop.vue'
const imgobj={
	'谢谢参与':'/static/xxhg.png',
	'黄金卷':'/static/hb.png',
	'生肖币':'/static/gtj.png',
}

import {mapState} from 'pinia'
import useUserStore from '../../store/user';
	export default {
		components:{
			richtextPop
		},
		data() {
			return {
				dis: false,
				obj: {
					prizes: {
						
					},
					
				},
				node: '',
				prizeList: [{
						id: 'coupon88',
						name: '8.8折',

					},
					{
						id: 'coupon900',
						Color: 'rgb(251, 219, 216)',
						name: '900',

					},
					{
						id: 'coupon1',
						name: '1元',

					},
					{
						id: 'apple',
						Color: 'rgba(246, 142, 46, 0.5)',
						name: '苹果手机',

					},
					{
						id: 'coupon210',
						name: '210元',

					},
					{
						id: 'jd100',
						name: '100京豆',

					},
					{
						id: 'coupon400',
						name: '400元',

					},
					{
						id: 'thanks',
						name: '谢谢参与',

					}
				]
			};
		},
		mounted() {
			// this.activity()
			this.init()
		},
		computed: {
			...mapState(useUserStore,['info']),
			list1() {
				if (!this.obj.sign_log.length) {
					return []
				}
				console.log('=======')
				return this.obj.sign_log.slice(0, 4)
			},
			list2() {
				return this.obj.sign_log.slice(4, 7)
			},
			num1() {
				let a = 0
				this.obj.sign_log.forEach((item, index) => {
					if (item.is_sign) {
						a = index
					}
				})

				return a - 4
			},
			num() {
				let a = 0
				this.obj.sign_log.forEach((item, index) => {
					if (item.is_sign) {
						a = index
					}
				})
				return a
			}
		},
		methods: {
			to() {
				uni.navigateTo({
					url: '/pages/signlog/signlog'
				})
			},
			async init(id) {
				let a = await  LC.$api.user.turntable()
				a.data.prizes=a.data.prizes.map((i)=>{
					return {img:imgobj[i.prize_name],name:i.prize_name+this.dw(i)}
					
				})
				this.obj=a.data
				console.log(this.obj)
			},
			dw(a){
					
				if(a.number<1){
					return ''
				}
				const imgobj1={
					'谢谢参与':'',
					'黄金卷':'张',
					'生肖币':'套',
				}
				return  a.number+imgobj1[a.prize_name]
			},
			raffle() {
				
				if (this.dis) {
					return
				}
				
				this.dis = true
				 LC.$api.user.raffle(this.obj.id)
					.then(({data}) => {
						
						this.dis = false
						
						LC.$store('user').lottery_num-=1
						this.$refs.zp.run(data.key)
						LC.$store('user').userinfo()
						setTimeout(() => {
							uni.$u.toast(data.value)
						}, 3000)
						// this.activity()
					})
					.catch(() => {
						this.dis = false
					})
			},
			async activity() {


				let a = await activity()
				console.log(a)
				this.obj = a
			},
			sign() {
				this.dis = true

				sign()
					.then((res) => {
						this.dis = false
						this.$tip.toast(res)
						this.activity()
					})
					.catch((res) => {
					
						this.dis = false
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .fixed{
		background-color: transparent;
	}
	.button1{
		
		background:url(/static/icon_jxxz.png);
		background-size: 100% 100%;
		
		width: 391rpx;
		height: 67rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 23rpx;
		line-height: 67rpx;
		color: #FFE0C8;
		line-height: 67rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 130rpx;
	}
	.top-1{
		image{
			width: 719rpx;
			height: 212rpx;
			
		}
		.title-b{
			width: 561rpx;
			height: 115rpx;
			background-size:100% 100% ;
			margin-top: -10rpx;
			padding-top: 25rpx;
			box-sizing: border-box;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 31rpx;
			color: #F6DBD3;
			background-image: url('/static/cjcs.png');
		}
		
	}
	.ritch{
		
		*{
			color: #fff !important;
			background-color: transparent !important;
			
			 display: block;
		}
		
	}
	.jl {
		width: 32rpx;
		height: 32rpx;
	}

	::v-deep .u-text__value--content {
		color: #FFFFFF;
	}

	::v-deep .u-text__value--main {
		color: #FFFFFF;
	}

	::v-deep .u-steps-item__wrapper {
		background: none;
	}

	.sign-wapper {
		width: 690rpx;
		padding: 56rpx 52rpx;
		box-sizing: border-box;
		min-height: 842rpx;
		margin: 0 auto;
		margin-top: 220rpx;
		
		background-size: 100% 100%;
	}

	.signdata-top {
		display: flex;
		justify-content: center;
	}

	.signdata-bot {
		margin: 0 -25rpx;
		margin-top: 15rpx;
	}

	.signdata-item.active {
		background: linear-gradient(180deg, #B549DF 0%, #E260D2 100%);
		color: #fff;
	}

	.signdata-item {
		width: 110rpx;
		height: 154rpx;
		background: #EEF0F0;
		border-radius: 15rpx;
		display: flex;
		margin-right: 50rpx;

		&:last-child {
			margin-right: 0;
		}

		text-align: center;
		align-items: center;
		justify-content: center;
		font-size: 23rpx;
		line-height: 33rpx;
		font-family: PingFangSC-Regular,
		PingFang SC;
		font-weight: 400;
		color: #9BA5B8;

		text {
			margin-top: 5rpx;
		}

		flex-direction: column;

		image {
			width: 63rpx;
			height: 63rpx;
		}
	}

	.wapper {
		background-image: url('/static/zp_bg.png');
		background-size: 100% 1626rpx;
		background-repeat: no-repeat;
		min-height: 100vh;
		height: auto;
		padding-bottom: 60rpx;

		.num {
			margin: 0 auto;
			margin-top: 40rpx;
			width: 379rpx;
			border-radius: 33rpx;
			padding: 5rpx;

			// border-radius: 33rpx;
			// border: 4rpx solid;
			.content-num {
				padding: 15rpx 0;
				border-radius: 33rpx;
				font-size: 27rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;

				>text {
					color: #FFAE00;
					margin-left: 10rpx;
				}

				background: linear-gradient(90deg, #F437FF 0%, #9516C5 48%, #6505A7 100%);
			}

			background: linear-gradient(90deg, rgba(38, 233, 254, 1), rgba(222, 46, 255, 1));
		}

		.luck {
			width: 554rpx;
			height: 83rpx;
			display: block;
			margin: 0 auto;
		}
	}
</style>